<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue v-for</title>
</head>
<body>
<div id="app">
    <!--循环几次-->
    <p v-for="c in 3">{{c}}</p>

    <!--for循环 , 最后一个参数为索引-->
    <p v-for="item in arr"> {{ item }} </p>
    <hr>
    <p v-for="(item, i) in arr">{{ i}} - {{ item }} </p>
    <hr>

    <p v-for="(key, value) in obj">{{ key }} - {{ value }} </p>
    <hr>
    <p v-for="(key, value, i) in obj">{{i}} - {{ key }} - {{ value }} </p>
    <hr>
    <p v-for="(o, i) in objArr">{{i}} - {{ o.id }} - {{ o.name }} </p>

    <hr>
    <!--v-for中的 key， 当某些情况下需要保证数组中值标识唯一性时，需要使用key-->
    <p v-for="(o, i) in objArr" :key="o.id">{{i}} - {{ o.id }} - {{ o.name }} </p>
    <div>
        <label>ID:</label><input type="text" v-model="id">
        <label>Name:</label><input type="text" v-model="name">
        <input type="button" value="add" @click="add">
    </div>
</div>


<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            obj: {color: 'red', 'font-style': 'italic'},
            arr: [2,3,5,6,7],
            objArr: [{id: 1, name:'tom'},{id:2,name:'li'}],
            id: null,
            name: null
        },
        methods: {
            add() {
                // 从后面拼加
                // this.objArr.push({id:this.id, name:this.name});
                // 从前面添加
                this.objArr.unshift({id:this.id, name:this.name});
            }
        }
    })
</script>
</body>
</html>
